<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="../../static/layui/css/layui.css" rel="stylesheet">
    <script src="../../static/layui/layui.js"></script>
    <style>
        .container{
            padding: 25px;
        }
    </style>
</head>
<body>
<!--行工具栏模板-->
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="delete">删除</a>
    </div>
</script>
<!--头部工具栏模板-->
<script type="text/html" id="userBar">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-sm layui-bg-red" lay-event="batchDelete">
            <i class="layui-icon layui-icon-delete"></i>批量删除
        </a>
    </div>
</script>

<div class="container">
    <div class="search">
        <form class="layui-form userForm layui-row layui-col-space16">
            <div class="layui-col-md3">
                <div class="layui-input-wrap">
                    <input type="text" name="model" value="" placeholder="请输入模块名称" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-input-wrap">
                    <select name="description" lay-filter="description">
                        <option value="">操作类型</option>
                        <option value="添加">添加</option>
                        <option value="删除">删除</option>
                        <option value="更新">更新</option>
                        <option value="查询">查询</option>
                    </select>
                </div>
            </div>
            <div class="layui-col-md4">
                <button class="layui-btn" lay-submit lay-filter="table-search">搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
    <span style="color: red"></span>
    <table class="layui-hide" id="ID-table-demo-data" lay-filter="logs-filter"></table>
</div>
<script>
    layui.use(function(){
        // 获取表格对象
        let table = layui.table,
            form = layui.form,
            $ = layui.$,
        layer = layui.layer;
        // 已知数据渲染
        let inst = table.render({
            elem: '#ID-table-demo-data',
            toolbar: "#userBar",
            id:'logs',
            url:"/ssm/log/page",
            cols: [[ //标题栏
                {type: 'checkbox', fixed: 'left'},   // 设置复选框
                {field: 'id', title: 'ID', hide:true},
                {field: 'username', title: '操作人'},
                {field: 'ip', title: 'IP'},
                {field: 'params', title: '参数',minWidth: 230},
                {field: 'url', title: '接口'},
                {field: 'description', title: '操作'},
                {field: 'model', title: '模块'},
                {field: 'timeConsuming', title: '耗时'},
                {field: 'createTime', title: '操作时间'},
                {fixed: 'right', title:'操作',  toolbar: '#barDemo'}
            ]],
            skin: 'line', // 表格风格
            even: true,
            page: true, // 是否显示分页
            limits: [5, 10, 15],
            limit: 5 // 每页默认显示的数量
        });

        table.on('toolbar(logs-filter)', function(obj) {
            let id = obj.config.id;
            let checkStatus = table.checkStatus(id);
            let infos = checkStatus.data  // [{},{}]

            switch (obj.event) {
                case 'add':
                    //  发送异步请求 到后台完成用户信息添加
                    break;
                case 'batchDelete':
                    //  箭头函数   lambda   ->
                    let ids = infos.map(info=>info.id);     // []
                    // 判定用户是否选择数据
                    if (ids.length==0){
                        layer.msg("请至少选择一条数据")
                        return;
                    }
                    //  发送异步请求 到后台完成用户信息删除
                    $.ajax({
                        url:'/ssm/log/delete',
                        data: {ids},
                        traditional:true,
                        type:"get",
                        dataType:'json',
                        success:function (res){
                            if (res.code==0){  //  删除成功
                                layer.msg(res.message,{icon:1},function (){
                                    table.reload("logs",{
                                       page:{
                                           curr:1,
                                            limit:5
                                        }
                                    })  //  表格数据的重载
                                })
                            }else{
                                layer.msg(res.message,{icon:2})
                            }
                        }
                    })
                    break;
            }
            ;
        });

        // 触发单元格工具事件
        table.on('tool(logs-filter)', function(obj){ // 双击 toolDouble
            let data = obj.data; // 获得当前行数据
            if(obj.event === 'edit'){
                // 发送异步请求
            } else if(obj.event === 'delete'){
                let  id = data.id;
                //  发送异步请求
                $.ajax({
                    url:'/ssm/log/delete',
                    data: {ids:id} , //  {ids:ids}    es6   /sport/user/delete?ids=1
                    type:"get",
                    dataType:'json',
                    success:function (res){
                        if (res.code==0){  //  删除成功
                            layer.msg(res.message,{icon:1},function (){
                                table.reload("logs",{
                                    page:{
                                        curr:1,
                                        limit:5
                                    }
                                })  //  表格数据的重载
                            })
                        }else{
                            layer.msg(res.message,{icon:2})
                        }
                    }
                })
            }
        });
        // 监听表单事件
        form.on('submit(table-search)',function (obj){
            let  searchData = obj.field;
            //  重载表格数据
            table.reload('logs', {
                page:{
                    curr:1,
                    limit:5
                },
                where: {
                    model:searchData.model,
                    description:searchData.description
                }
            });
            return false;
        })
    });
</script>

</body>
</html>
